Селекторы CSS
CSS селектор — это то что позволяет выбирать нужный элемент в HTML документе,
чтобы потом применить к этому элементу CSS стили.
!important
Приоритет селекторов
Когда в CSS имеется несколько правил, устанавливающих одно и тоже CSS свойство некоторому элементу,
приоритетным из них является то, в котором селектор имеет большую специфичность (вес).
* { }
Универсальный селектор
Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::before и ::after .
h1 { }
Селектор по тегу
Селектор по тегу находит элемент на странице по имени тега.
.style { }
Селектор по классу
Удобный способ выбрать из HTML-разметки элементы только с нужным классом. И применить к ним стили.
#style { }
Селектор по идентификатору
Селектор по идентификатору находит на странице элемент, которому задан атрибут id с конкретным значением.
h1, h2 { }
Группировка селекторов
Если нескольким селекторам нужно задать одно и то же правило, то можно написать длинно:
:is()
Выбрать не сколько селекторов
Функция-псевдокласс :is() принимает один или несколько селекторов в качестве аргумента. Браузер при чтении применяет стили к любому из селекторов-аргументов.
:where()
Выбрать не сколько селекторов
Функция-псевдокласс :where() принимает один или несколько селекторов в качестве аргумента. Браузер при чтении применяет стили к любому из селекторов-аргументов.
.style .style2 { }
Селектор потомка
Такие вложенные селекторы используются, если нужно задать разные стили для элемента на всей странице и для элемента внутри определённого блока.
.element1 > .element2 { }
Непосредственно вложенные
Такая комбинация удобна, чтобы выбрать элемент, основываясь на его точном расположении в структуре документа.
.element1 + .element2 { }
Смежные
Элемент справа от + должен следовать в HTML сразу за элементом слева от +. Проще говоря, правый элемент должен быть соседом левого элемента, чтобы смежный селектор сработал.
.element1 ~ .element2 { }
Последующие
Правило применится ко всем блокам, подходящим под правый селектор, при учёте, что они являются соседями блоков из селектора слева от ~.
:first-child
:last-child
:nth-child(2)
:nth-last-child(2)
:last-child
:nth-child(2)
:nth-last-child(2)
Выбрать элементы по порядковому номеру в родителе
При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.
:not
Выбрать все кроме
Очень полезный псевдокласс, который поможет вам неплохо так сэкономить строчки кода. Суть работы этого парня — отсечь все элементы, не подходящие под условие. Звучит сложнее, чем выглядит.
:empty
Выбор пустых элементов
Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков, текста или псевдоэлементов внутри.
:required
Поля формы обязательные для заполнения
Псевдокласс :required, дополняющий основной селектор, поможет выбрать элементы input, textarea или select, у которых задан атрибут required.
:optional
Поля формы не обязательные для заполнения
С помощью псевдокласса :optional можно выбрать элементы, заполнять которые необязательно. Это могут быть input, select и textarea без атрибута required.
:placeholder-shown
Выбор полей с подсказками
Псевдокласс :placeholder-shown выбирает на странице все input или textarea, у которых показывается подсказка (плейсхолдер).
:default
Выбор полей заполненные по умолчанию
Псевдокласс :default применяется к элементам, которые используются по умолчанию в группе аналогичных элементов.
:lang
Выбор элемента на другом языке
Псевдокласс :lang выбирает элементы, в зависимости от их языка, который определяется комбинацией атрибута lang, тега и иногда информацией из протокола передачи данных (такой, как заголовки HTTP).